<template>
	<view class="page">
		<view class="service-list">
			<view class="service-item" v-for="item in applyList" :key="item.id" @click="toDetail(item.id)">
				<view class="service-left">
					<image class="service-image" :src="getImageUrl(item.bussnissList.img)"></image>
				</view>
				<view class="service-right">
					<view class="service-title-flex">
						<view class="service-title-nav">
							<view class="service-title">{{item.bussnissList.title}}</view>
						</view>
						<view class="service-tag"><view class="block"></view>招募中</view>
					</view>
					<view class="service-info">
						<view class="item-container">
							<view>积分：</view>	
							<view class="service-jifen">{{item.money}}</view>	
						</view>
						<view>可报名数：{{item.bussnissList.applycount}}</view>	
						<view>已报名：{{item.bussnissList.readycount}}</view>	
					</view>
					<view class="service-left-button">
						<view class="item-container">
							<view>期间：</view>
							<view class="service-date">{{formatDate(item.bussnissList.start_time)}}~{{formatDate(item.bussnissList.end_time)}}</view>
						</view>
					</view>
					<view class="service-status">
						<view>报名状态：</view>
						<view :class="{'status-green':item.status == '入选',
									   'status-orange': item.status == '报名中',
									   'status-gray': item.status == '不通过'}">{{item.status}}</view>
					</view>
				</view>
			</view> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				param:{},
				applyList:[],
				isactive:true
			}
		},
		methods: {
			async getServiceList(){
				let token = uni.getStorageSync("token");
				let user_id = uni.getStorageSync("user_id");
				await this.http.get({
					url:'/index.php/Wxapp/Apply/applyList',
					data:{token:token,user_id:user_id}
				}).then(resp=>{
					this.applyList = resp.data
					console.log("我的服务列表：",resp)
				}).catch(err=>{
					console.log("请求服务列表失败：",err)
				})
			},
			getImageUrl(src){
				return this.domain + src;
			},
			formatDate(date){
				if(date == null){
					return null
				} 
				
				return date.length > 10? date.substr(0,10) : date
			},
			toDetail(id){
				uni.navigateTo({
					url:"/pages/index/services/detail/detail?id=" + id
				})
			},
		},
		onLoad() {
			this.getServiceList()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: 25rpx;
	};
	.page {
		width: 100vw;
		height: 100%;
		min-height: 100vh;
		display: flex;
		justify-content: center;
		background: #eee;
	}
	.service-list {
		width: calc(100% - 20rpx);
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		.service-item {
			display: flex;
			background-color: #fff;
			height: 240rpx;
			width: 100%;
			margin-top: 10rpx;
			padding: 10rpx 0 10rpx 10rpx;
			border-radius: 10rpx;
			//box-shadow: 0 1px 2px -2px #00000029,0 3px 6px #0000001f,0 5px 12px 4px #00000017;
			.item-container{
				display: flex;
			};
			.service-left {
				width: 38%;
				.service-image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			};
			.service-right {
				width: 60%;
				margin-left: 25rpx;
				.service-title-flex {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					.service-title-nav {
						display:table-cell;              
						vertical-align: middle;
						text-align: center;
						.service-title {
							height: 60rpx;						
							width: 100%;
							text-overflow: ellipsis;
							text-align: left;
							display: -webkit-box;
							line-height: 30rpx;
							font-size: 30rpx;
							overflow: hidden;
							line-break: anywhere;
							-webkit-box-orient: vertical;
							-webkit-box-pack: left;
							-webkit-box-align: left;
							-webkit-line-clamp: 2;
							color: #222;
							font-weight: bold;
						}
					}
					.service-tag {
						position: relative;
						width: 110rpx;
						height: 50rpx;
						margin-left: 10rpx;
						padding-right: 10rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						flex-shrink: 0;
						color: #fff;
						background: #1890ff;
						font-size: 25rpx;
						font-weight: 600;
						.block {
							position: absolute;
							width: 0;
							height: 0;
							left: 0;
							box-sizing: border-box;
							border-width: 26rpx;
							border-style: solid;
							border-color: transparent transparent transparent #fff;
						}
					}
				}
				.service-info {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					padding-right: 10rpx;
					.service-jifen {
						color: #ff0000;
					}
				};
				.service-left-button{
					display: flex;
					width: 100%;
					margin-top: 10rpx;
					.service-date {
						color: #B9B9B9;
					};
				}
				.service-status{
					display: flex;
					margin-top: 10rpx;
					.status-green{
						color: #00aa00;
						//#ff9100，#1890ff，#f0f2f5
					}
					.status-orange{
						color: #ff9100;
					}
					.status-gray{
						color: #f0f2f5;
					}
				}
			}
		}
	}
</style>
